{% extends "base.html" %}

{% block html_title %}
    Player gameset
{% endblock html_title %}

{% block page_title %}
    Player gameset
{% endblock page_title %}

{% block content %}
<div id="content">

    <el-row>
        <el-table :data="gamesets" @sort-change="onSortChanged"
                  @row-click="onTableRowClick">
            <el-table-column prop="wagerAmount" label="wagerAmount">
            </el-table-column>
            <el-table-column prop="envelopeAmount" label="envelopeAmount">
            </el-table-column>
            <el-table-column prop="grabPoint" label="grabPoint">
            </el-table-column>
            <el-table-column prop="grabAmount" label="grabAmount">
            </el-table-column>
            <el-table-column prop="earnedAmount" label="earnedAmount">
            </el-table-column>
            <el-table-column prop="bankerId" label="bankerId">
            </el-table-column>
        </el-table>
    </el-row>

    <el-row>
        <el-pagination background layout="prev, pager, next"
                       :total="gamesetCount" page-size=30
                       :current-page.sync="currentPage" @current-change="onCurrentPageChanged">
        </el-pagination>
    </el-row>

</div>
{% endblock content %}

{% block js %}
<script>
    var container = new Vue({
        el: "#content",
        data: function() {
            return {
                currentPage: 1,
                playerGamesetCount: 0,
                playerGamesets: []
            }
        },
        methods: {
            onSortChanged: function(args) {
                console.log(args);
            },
            onTableRowClick: function(row, event, column) {
                console.log(row);
                console.log(column);
                console.log(column);
            },
            onCurrentPageChanged: function(currentPage) {
                this.refreshPlayerGamesets();
            },
            refreshPlayerGamesets: function() {
                this.$http.get('/api/gameset/', {
                    params: {
                        page: this.currentPage-1,
                    }
                }).then((res) => {
                    this.playerGamesets = res.data.playerGamesets;
                    this.playerGamesetCount = res.data.count;
                });
            },
        },
        created: function() {
            this.refreshPlayerGamesets();
        }
    });
</script>
{% endblock js %}